<template>
  <div class="wrap">
    <div class="fom">
      <h2>出题系统</h2>
      <el-form>
        <el-form-item label="题型">
          <el-select placeholder="选择题型" v-model="obj.type">
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目难度">
          <el-select placeholder="选择难度" v-model="obj.level">
            <el-option
              v-for="(item, index) in levels"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="obj.num" :min="1" class="small" />
        </el-form-item>
        <div>
          <h3>标题组</h3>
          <el-checkbox-group v-model="obj.tag">
            <el-checkbox
              :label="item.tagId"
              v-for="item in tags"
              :key="item.tagId"
            >
              {{ item.tagName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div>
          <p class="msg">{{ msg }}</p>
          <div>
            <el-button type="primary" @click="subfun">出题</el-button>
            <el-button type="success">重置</el-button>
          </div>
        </div>
      </el-form>
      <div class="showtk" ref="print">
        <h2>Text文库笔试题</h2>
        <div class="showwrap" v-for="(item, num1) in showdata" :key="item.tid">
          <h4>{{ types[item.tid] }}</h4>
          <div
            class="showqn clearbox"
            v-for="(v, num2) in item.value"
            :key="v.id"
          >
            <div class="btns no-print">
              <el-button type="primary" @click="v.showtxt = !v.showtxt"
                >修改</el-button
              >
              <el-button type="success" @click="delfun(num1, num2)"
                >删除</el-button
              >
            </div>
            <div class="qn" v-show="v.showtxt == false">
              <p v-if="v.question.title">{{ v.question.title }}</p>
              <p v-else></p>
              <div v-if="v.question.option">
                <p v-for="(op, index) in v.question.option" :key="index">
                  {{ op }}
                </p>
              </div>
            </div>
            <el-input
              class="qn"
              type="textarea"
              :rows="5"
              v-model="v.txt"
              v-show="v.showtxt == true"
            />
          </div>
        </div>
        <div class="btns no-print">
          <el-button type="primary" @click="savefun">保存</el-button>
          <el-button type="success" @click="funprint">打印</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Prevtk",
  data() {
    return {
      tags: [], //标题组
      types: [
        "请选择",
        "单选题",
        "多选题",
        "填空题",
        "判断题",
        "简答题",
        "输出题",
        "编程题",
      ],
      levels: ["请选择", "简单", "容易", "中", "难", "非常难"],
      obj: { type: "", level: "", tag: [], num: 1 }, //表单文本框数据
      msg: "", //错误提示
      showdata: [], //出题的数据
      idarr: [], //出过题的id值
      //showtxt: false,
    };
  },
  methods: {
    subfun: function () {
      this.msg = "";
      if (this.obj.type == "" || this.obj.type == 0) {
        this.msg = "请选择题型";
      } else if (this.obj.level == "" || this.obj.level == 0) {
        this.msg = "请选择题目难度";
      } else if (this.obj.tag.length == 0) {
        this.msg = "至少选择一个标题组";
      } else {
        var str = "";
        for (let v of Object.keys(this.obj)) {
          str += "&demands%5B0%5D." + v + "=" + this.obj[v];
        }
        str = str.substring(1) + "&idNotIn=" + this.idarr;
        console.log(str);
        var th = this;
        this.$axios
          .request({
            method: "get",
            url: "https://114.55.145.59:8443/library/newpaper?" + str,
          })
          .then((result) => {
            console.log(result);
            var flg = false;
            var x = th.showdata;
            var index = 0;
            for (let i = 0; i < x.length; i++) {
              if (x[i].tid == result.data[0].type) {
                flg = true;
                index = i;
              }
            }
            //出过此类题型
            if (flg) {
              for (let j = 0; j < result.data.length; j++) {
                x[index].value.push(result.data[j]);
              }
            } else {
              //没出过此类题型
              x.push({ tid: result.data[0].type, value: result.data });
            }
            var arr = [];
            //把出过的题id进行存储 把题目和选项存储成一个字符串
            for (let k = 0; k < x.length; k++) {
              for (let e = 0; e < x[k].value.length; e++) {
                arr.push(x[k].value[e].id);
                x[k].value[e].txt = "";
                if (x[k].value[e].question.title) {
                  x[k].value[e].txt += x[k].value[e].question.title + "\n";
                }
                if (x[k].value[e].question.option) {
                  x[k].value[e].txt += x[k].value[e].question.option.join("\n");
                }
                x[k].value[e].showtxt = false;
              }
            }
            th.idarr = arr;
            th.showdata = x;
            console.log(th.showdata);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    delfun: function (num1, num2) {
      var x = this.showdata;
      x[num1].value.splice(num2, 1);
      this.showdata = x;
    },
    savefun: function () {
      var data = this.showdata;
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].value.length; j++) {
          var z = data[i].value[j].txt.split("\n");
          var [a, ...b] = [...z];
          data[i].value[j].question.title = a;
          data[i].value[j].question.option = b;
          data[i].value[j].showtxt = false;
        }
      }
      this.showdata = data;
    },
    funprint: function () {
      this.$print(this.$refs.print);
    },
  },
  //查询标题组
  created() {
    var th = this;
    this.$axios
      .get("https://114.55.145.59:8443/librarytag/tag")
      .then((result) => {
        var x = [];
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].tagName !== null) {
            x.push(result.data[i]);
          }
        }
        th.tags = x;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
.showtk {
  width: 90%;
  margin: 20px auto;
}
.showtk h2 {
  background-color: #81D8D0;
  text-align: center;
  color: #FFFFFF;
  padding: 10px 0;
}
.showwrap {
  padding: 0px 15px;
}
.showwrap h4 {
  padding: 15px 0;
}
.showwrap .showqn {
  padding: 10px 0;
}
.showwrap .showqn .btns {
  float: right;
}
.showwrap .showqn p {
  padding: 5px 0;
}
</style>
